<html>
<head>
    <meta charset="utf-8" />
    <title>规格编辑</title>
    <link rel="stylesheet" href="./components/select/select.css" >
    <link rel="stylesheet" href="./components/input/input.css" >
    <link rel="stylesheet" href="./components/table/table.css" >
    <style>
        *{
            margin:0px;padding:0px;
        }

        select {
            /*将默认的select选择框样式清除*/
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
        }
        /*IE浏览器隐藏下拉箭头*/
        select::-ms-expand {
            display: none;
        }

        .remove{
            color:rgb(45,140,240);
            margin-left:15px;
            line-height:40px;
            font-size:12px;
            cursor:pointer;
        }
        .zhushi{
            color:red;
            margin-left:15px;
            line-height:40px;
            font-size:12px;
            cursor:pointer;
        }

        #app .app-title{
            margin:10px auto;
            height:30px;
            line-height:30px;
            width:120px;
            text-align:center;
            font-size:16px;
            font-weight:bold;
        }
        #app .container{
            width:900px;
            margin:0 auto;
            margin-top:10px;
        }
        .container .form-item{
            display:flex;
            margin-bottom:12px;
        }
        .container .form-item .left{
            width:70px;
            line-height:30px;
            height:30px;
            font-size:12px;
            color:#333333;
            font-weight:bold;
            flex-shrink: 0;
        }
        .container .form-item .right{
            flex-grow:1 ;
        }
        .container .form-item .btns{
            height:25px;
            display:flex;
        }
        .container .form-item .btns .btn{
            height:100%;
            line-height:25px;
            font-size:12px;
            color:grey;
            border-radius:5px;
            cursor:pointer;
        }
        .container .form-item .btns .btn:hover{
            border-color:grey;
        }
        .guige-add{
            border:1px dashed #dcdcdc;
            padding:0 23px;
        }
        .guige-named{
            border:1px solid #ececec;
            margin-left:10px;
            padding:0 12px;
        }

        .form-item .right .guige-table{
            border:1px solid  #ececec ;
        }
        .form-item .right .guige-table .guige-table-top{
            background:rgb(247,247,247);
            height:40px;
            border-bottom:1px solid #ececec;
            display:flex;
            align-items:center;
        }
        .form-item .right .guige-table .guige-table-top .title{
            height:40px;
            line-height:40px;
            color:rgb(81 , 90 , 110) ;
            font-size:12px;
            margin-left:18px;
            width:100px;
            text-align:right;
        }
        .form-item .right .guige-table .guige-table-top .select{
            border:1px solid #ececec;
            width:150px;
            border-radius:5px;
            height:30px;
        }
        .form-item .right .guige-table .guige-table-content{
            display:flex;
            flex-wrap: wrap;
        }
        .form-item .right .guige-table .guige-table-content .title{
            height:40px;
            line-height:40px;
            color:rgb(81 , 90 , 110) ;
            font-size:12px;
            margin-left:2px;
            width:90px;
            text-align:right;
        }
        .form-item .right .guige-table .guige-table-content .item{
            display:flex;
            align-items:center;
        }
        .form-item .right .guige-table .guige-table-content .item .del-icon{
            width:14px;
            height:14px;
            margin-left:10px;
            cursor:pointer;
        }
        .form-item .right .guige-table .guige-table-content .item .del-icon img{
            width:100%;
            height:100%;
        }
        .form-item .right .guige-table .guige-table-content .item .input{
            width:100px;
            height:30px;
            border-radius:5px;
            border:1px solid #ececec;
            padding:0 10px;
        }

    </style>
</head>
<body>
<div id="app">
    <!-- <div class="app-title">
        添加商品规格
    </div> -->
    <div class="container">
        <div class="form-item">
            <div class="left" >ข้อมูลจำเพาะของผลิตภัณฑ์：</div>
            <div class="right btns">
                <div @click="add_guige" class="btn guige-add">
                    <span style="font-weight:bold;font-size:13px;">+</span>&nbsp;&nbsp;<span >เพิ่มข้อมูลจำเพาะ</span>
                </div>
                <div @click="add_default_guige" class="btn guige-named" >
                    ชื่อข้อกำหนดที่กำหนดเอง
                </div>
            </div>
        </div>

        <div v-for="(item , index) in select_guiges" class="form-item">
            <div class="left"></div>
            <div class="right">
                <div class="guige-table">
                    <div class="guige-table-top">
                        <div class="title" >
                            ชื่อข้อมูลจำเพาะ：
                        </div>
                        <div class="select">
                            <my-select :name="item.name" :data-list="default_guiges" label-property="name" @change="selected($event , index)"></my-select>
                        </div>
                        <div @click="remove_guige(index)" class="remove" >
                            ลบข้อมูลจำเพาะ
                        </div>
                    </div>
                    <div class="guige-table-content">
                        <div v-for="(value , idx) in item.values" class="item">
                            <div class="title" >
                                ความคุ้มค่า：
                            </div>
                            <div class="input">
                                <my-input @change="change_value($event , index , idx)" :value="value.value"></my-input>
                            </div>
                            <div @click="remove_guige_value(index,idx)" class="del-icon">
                                <img src="./img/del.png" />
                            </div>
                        </div>
                        <div @click="add_guige_value(index)" class="remove" >
                            เพิ่มค่าสเปค
                        </div>
                        <div class="zhushi" >(=, &, # สัญลักษณ์ไม่สามารถปรากฏในค่าข้อมูลจำเพาะ)</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-item">
            <div class="left" >รายละเอียดข้อมูลจำเพาะ：</div>
            <div class="right">
                <my-table :names="names" :values="values"></my-table>
            </div>
        </div>
    </div>
</div>
</body>
<script src="./js/jquery.js"></script>
<script src="./js/layer.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./components/select/select2.js"></script>
<script src="./components/input/input2.js"></script>
<script src="./components/table/table2.js"></script>
<script>

    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }

    var uid = getQueryVariable("uid")

    var app = new Vue({
        el:"#app" ,
        data(){
            return{
                default_guiges:[
                    // {name:"尺寸" , gid:1} ,
                    // {name:"颜色" , gid:1}
                ] ,
                select_guiges:[
                    // {values:[{value:""}] , name:"尺寸"} ,
                    // {index:1 , values:[{value:"300"} , {value:"400"} , {value:"500"}] }
                ] ,
                values:[]
            }
        } ,
        watch:{
            values:{
                handler:function(n , o) {
                    this.setStorage()
                },
                deep:true
            }
        } ,
        created:function(){
            // console.log(this.select_guiges)
            this.values = this.values_comput()
            this.getStorage() ;
        } ,
        methods:{
            selected(res , index){
                this.select_guiges[index].name = res.value.name
                this.setStorage()
            } ,
            add_guige(){
                if(this.select_guiges.length == 3) {
                    layer.msg("จำนวนข้อมูลจำเพาะต้องไม่เกินสาม")
                    return
                }
                this.select_guiges.push({values:[] , name:"ขนาด"})
                this.values = this.values_comput()
                this.setStorage()
            } ,
            remove_guige(idx) {
                this.select_guiges.splice(idx , 1)
                this.values = this.values_comput()
                this.setStorage()
            } ,
            remove_guige_value(index , idx){
                this.select_guiges[index].values.splice(idx , 1)
                this.values = this.values_comput()
                this.setStorage()
            } ,
            add_guige_value(index){
                this.select_guiges[index].values.push({value:""})
                this.values = this.values_comput()
                this.setStorage()
            } ,
            change_value(res , index , idx){
                this.select_guiges[index].values[idx].value = res.value
                this.values = this.values_comput()
                this.setStorage()
            } ,
            setStorage:function(){
                var names = []
                for(var i in this.select_guiges) {
                    names.push(this.select_guiges[i].name)
                }
                window.localStorage.guige2 = JSON.stringify({names:names , values:this.values , default_guiges:this.default_guiges , select_guiges:this.select_guiges})
            } ,
            getStorage:function(){
                var data = JSON.parse(window.localStorage.guige2)
                if(data == null) {
                    return
                }
                // console.log(data)
                if(data.default_guiges != null) {
                    this.default_guiges = data.default_guiges
                }
                if(data.values != null) {
                    this.values = data.values
                }
                if(data.select_guiges != null) {
                    this.select_guiges = data.select_guiges
                }
            } ,
            add_default_guige(){
                var self = this
                layer.open({
                    title:'เพิ่มชื่อข้อมูลจำเพาะ',
                    content:"<input id='value' style='border:1px solid #ececec;outline:none;width:240px;height:30px;padding-left:5px;' placeholder='กรุณากรอกชื่อข้อมูลจำเพาะ' />" ,
                    btn: ['ตกลง'],
                    yes:function(res){
                        var value = $("#value").val()
                        var flag = true
                        for(var i in self.default_guiges) {
                            if(self.default_guiges[i] == value) {
                                layer.msg("มีข้อมูลจำเพาะอยู่แล้ว")
                                flag = false
                            }
                        }
                        if(flag) {
                            $.ajax({
                                url:"/guige/add_guige" ,
                                data:{uid:uid , name:value,type:2} ,
                                success:function(res){
                                    if(res.code == 200) {
                                        self.default_guiges.push({name:value , gid:1})
                                    }else{
                                        layer.msg(res.msg)
                                    }
                                } ,
                                fail:function(err) {
                                    layer.msg("เครือข่ายที่ผิดปกติ")
                                }
                            })
                        }
                        layer.close(res)
                    }
                })
            } ,
            walkinto(arr , idx){
                if(idx > this.select_guiges.length - 1) {
                    return
                }
                if(this.select_guiges[idx].values.length == 0) {
                    var tmp = []
                    arr.push({"name":"" , jiage:"" , kucun:"" , img:"" , children:tmp})
                    this.walkinto(tmp , idx+1)
                }else{
                    for(var i in this.select_guiges[idx].values) {
                        var tmp = []
                        arr.push({"name":this.select_guiges[idx].values[i].value , jiage:"" , kucun:"" , img:"" , children:tmp})
                        this.walkinto(tmp , idx+1)
                        // tmp.splice(tmp.length - 1 , 1)
                    }
                }
            } ,
            values_comput(){
                var old = this.values
                var values = []
                this.walkinto(values , 0)
                if(values.length != 0 && old.length != 0) {
                    for(var i in old) {
                        for(var j in values) {
                            if(values[j].name == old[i].name) {
                                values[j].img = old[i].img
                            }
                        }
                    }
                }
                switch(this.select_guiges.length) {
                    case 1:
                        for(var i in old) {
                            for(var j in values) {
                                if(old[i].name == values[j].name) {
                                    values[j].jiage = old[i].jiage
                                    values[j].kucun = old[i].kucun
                                }
                            }
                        }
                        break
                    case 2:
                        for(var i in old) {
                            for(var j in values) {
                                if(old[i].name == values[j].name) {
                                    for(var m in old[i].children) {
                                        for(var n in values[j].children) {
                                            if(old[i].children[m].name == values[j].children[n].name) {
                                                values[j].children[n].jiage = old[i].children[m].jiage
                                                values[j].children[n].kucun = old[i].children[m].kucun
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        break
                    case 3:
                        for(var i in old) {
                            for(var j in values) {
                                if(old[i].name == values[j].name) {
                                    for(var m in old[i].children) {
                                        for(var n in values[j].children) {
                                            if(old[i].children[m].name == values[j].children[n].name) {
                                                for(var a in old[i].children[m].children) {
                                                    for(var b in values[j].children[n].children) {
                                                        if(old[i].children[m].children[a].name == values[j].children[n].children[b].name) {
                                                            values[j].children[n].children[b].jiage = old[i].children[m].children[a].jiage
                                                            values[j].children[n].children[b].kucun = old[i].children[m].children[a].kucun
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        break
                }
                return values
            }
        } ,
        computed:{
            names(){
                var names = []
                for(var i in this.select_guiges) {
                    names.push(this.select_guiges[i].name)
                }
                return names
            }
        }
    })
</script>
</html>